<template>
  <el-dialog :title="showTitle" :visible="showDialog" @close="closeDialogFn">
    <!-- 表单 -->
    <el-form
      ref="addForm"
      v-loading="sysloading"
      :model="formData"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="车辆类型" prop="name">
        <el-input
          v-model="formData.name"
          style="width: 50%"
          placeholder="请输入车辆类型"
        />
      </el-form-item>
      <el-form-item label="应载重量" prop="allowableLoad">
        <el-input
          v-model="formData.allowableLoad"
          style="width: 50%"
          placeholder="请输入车型载重"
        />
      </el-form-item>
      <el-form-item label="应载体积" prop="allowableVolume">
        <el-input
          v-model="formData.allowableVolume"
          style="width: 50%"
          placeholder="请输入车型体积"
        />
      </el-form-item>
      <el-form-item label="长" prop="measureLong">
        <el-input
          v-model="formData.measureLong"
          style="width: 50%"
          placeholder="00"
        />
      </el-form-item>
      <el-form-item label="宽" prop="measureWidth">
        <el-input
          v-model="formData.measureWidth"
          style="width: 50%"
          placeholder="00"
        />
      </el-form-item>
      <el-form-item label="高" prop="measureHigh">
        <el-input
          v-model="formData.measureHigh"
          style="width: 50%"
          placeholder="00"
        />
      </el-form-item>
    </el-form>
    <!-- footer插槽 -->
    <template v-slot:footer>
      <el-button @click="closeDialogFn">取消</el-button>
      <el-button type="danger" @click="submitFn"> 确定 </el-button>
    </template>
  </el-dialog>
</template>
<script>
import { addCarApi, editCarDetailsApi } from '@/api/car'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      sysloading: false, // 确定按钮loading
      formData: {
        name: '', // 车辆类型名
        allowableLoad: '', // 重量
        allowableVolume: '', // 体积
        measureHigh: '', // 高
        measureLong: '', // 长
        measureWidth: '' // 宽
      },
      rules: {
        name: [
          {
            required: true,
            message: '车辆类型不能为空',
            trigger: ['blur', 'change']
          },
          {
            min: 1,
            max: 20,
            message: '车辆类型在1-20位',
            trigger: ['blur', 'change']
          }
        ],
        allowableLoad: [
          {
            required: true,
            message: '应载重量不能为空',
            trigger: ['blur', 'change']
          }
        ],
        allowableVolume: [
          {
            required: true,
            message: '应载体积不能为空',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  computed: {
    showTitle() {
      return this.formData.id ? '编辑车辆' : '添加车辆'
    }
  },

  methods: {
    // 关闭弹层
    closeDialogFn() {
      this.$emit('update:showDialog', false)
      this.formData = {
        name: '', // 车辆类型名
        allowableLoad: '', // 重量
        allowableVolume: '', // 体积
        measureHigh: '', // 高
        measureLong: '', // 长
        measureWidth: '' // 宽
      }
      this.$refs.addForm.resetFields() // 重置校验结果
    },

    // 确定按钮
    async submitFn() {
      this.sysloading = true
      if (this.formData.id) {
        // 编辑接口
        await editCarDetailsApi(this.formData.id, this.formData)
        this.$message.success('修改成功')
      } else {
        // 添加接口
        const res = await addCarApi(this.formData)
        console.log(res)
        this.$message.success('添加成功')
      }
      this.sysloading = false
      //   关闭弹窗，清空表单，清空校验
      this.closeDialogFn()
      // 添加成功，从新渲染角色列表
      this.$parent.getCarList()
    }
  }
}
</script>
<style lang="scss" scoped>
.tree-box {
  position: absolute;
  width: 50%;
  max-height: 2rem;
  left: 0;
  top: 0.6rem;
  z-index: 100;
  border: 0.0133rem solid #ccc;
  border-radius: 0.0533rem;
  padding-right: 0.0667rem;
  overflow-y: auto;
  background-color: #fff;
}
</style>
